<template>
  <div class="sys-header">
    <div class="logo">
      <slot name="logo"></slot>
    </div>
    <sidenav></sidenav>
    <div class="userInfo">
      <ul>
        <li>
          <el-dropdown>
            <span class="user">{{ userInfo.name }}
              <i class="el-icon-caret-bottom el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="logout" @click.native="loginOut">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Sidenav from './sidenav'
export default {
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  methods: {
    loginOut() {
      this.$store.dispatch('logout').then(() => {
        location.reload()
        this.$router.push('/login')
      })
    }
  },
  components: {
    Sidenav
  }
}
</script>
